<template>
  <div class="backbtn" @click="toggleClick">
	<svg :class="{'is-active':isActive}"
      class="hamburger"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64">
		<path d="M668.149109 890.436028c-7.820426-0.005117-15.589685-3.326768-21.022641-9.774621L341.342885 517.644557c-8.586914-10.194176-8.612498-25.083282-0.063448-35.31225L633.575293 132.804678c9.733064-11.640108 27.053231-13.180184 38.687676-3.452635 11.637515 9.733689 13.184817 27.051099 3.451753 38.685068L398.20727 499.885078l290.933779 345.390401c9.768881 11.597129 8.287073 28.92682-3.310531 38.695301C680.675913 888.314715 674.394603 890.436028 668.149109 890.436028L668.149109 890.436028zM668.149109 890.436028" p-id="2042"></path>
	</svg>
  </div>
</template>

<script>
export default {
  name: 'Hamburger',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleClick() {
      this.$emit('toggleClick')
    }
  }
}
</script>

<style scoped>
.hamburger {
  display: inline-block;
  width: 20px;
  height: 20px;
  fill:#fff;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-10px;
  margin-left:-10px;
}

.hamburger.is-active {
  transform: rotate(180deg);
}
.backbtn{
	width:20px;
	height:40px;
	line-height:40px;
	border-radius:0 4px 4px 0;
	background:#46d1f1;margin-top:10px;
	color:#fff;
	position:relative;
}
</style>
